<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
<!--在此页面定义根路径-->


    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
<!--http://layui.apixx.net/doc/index.html-->

<!--    http://layui.apixx.net/doc/modules/table.html    -->

    <style>
        .layui-table tr{
            height: 45px;
        }
        .layui-table-cell{
            height: 45px;
        }
    </style>
</head>
<body>

<!--数据列表-->
<table class="layui-table" lay-data="{url:'manager/AllList', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
<!---->
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80}">ID</th>
        <th lay-data="{field:'name', width:180}">名称</th>
        <th lay-data="{field:'nickname', width:180}">昵称</th>
        <th lay-data="{templet:'#mimaTpl', width:140}">密码状态</th>
        <th lay-data="{templet:'#levelTpl', width:125}">用户等级</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
    </tr>
    </thead>
</table>
<!--列自定义模板-->
<script type="text/html" id="mimaTpl">
    {{# if(d.password==2){  }}
    <span style="color: springgreen;">用户自定义</span>
    {{#  }else{ }}
    <span style="color: lightseagreen;">已重置：123456</span>
    {{#  }  }}
</script>

<script type="text/html" id="levelTpl">
    {{# if(d.userlevel==1){  }}
    <span style="color: deepskyblue;">普通用户</span>
    {{#  }else if(d.userlevel==2){ }}
    <span style="color: orangered;">管理员</span>
    {{#  }  }}
</script>

<!--行内工具栏-->
<script id="linetools" type="text/html">
    <button type="button" class="layui-btn" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn" lay-event="reset">密码重置</button>
    <button type="button" class="layui-btn" lay-event="power">权限调整</button>
</script>
<!--头部工具栏-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="输入用户名以查询" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
        </div>
    </div>
</script>


<!--编辑数据表单-->
<div style="display: none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="id" type="hidden">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname" required lay-verify="required" placeholder="用户昵称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="telephone" required lay-verify="required" placeholder="联系方式" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <button type="button" lay-submit lay-filter="editsave" class="layui-btn layui-btn-sm">保存</button>
        <button type="button" class="layui-btn layui-btn-sm" name="cancel" onclick="cancle()">取消</button>
    </div>
</div>


<script src="layui/layui.all.js"></script>

<script>
    const $ = layui.$;
    const table = layui.table;
    const form = layui.form;
    const layer = layui.layer;

    // 行内按钮监听事件
    table.on("tool(datalist)",function(obj){
        //被点击按钮的lay-event属性
        let event=obj.event;
        //被点击按钮所在行的数据
        let data = obj.data;
        // if(event=="del"){
        //     //防止误操作
        //     layer.confirm("确认要删除?",function(index){
        //         //点击确认后执行函数
        //         layer.close(index);
        //         $.ajax({
        //             url:"",
        //             data:{id:data.id},
        //             success:function(res){
        //                 //提示信息
        //                 layer.msg("删除成功",{icon:1,time:1800});
        //             //     icon可以试试1~6分别是什么
        //                 //刷新表格数据
        //                 table.reload("datalist",{page:{curr:1}});
        //             }
        //         })
        //     })
        //
        //
        // }else
        if(event=="edit"){
            //回显表单数据
            form.val("editWin",data);
            layer.open({
                type: 1,
                tittle:'编辑分类',
                area: ['400px', '400px'],
                content:$("#editWin")
            });
        }else if(event=="reset"){
            layer.confirm("确认重置用户\""+data.name+"\"的密码？",function (index) {
                layer.close(index);
                $.ajax({
                    url: "manager/chongzhi",
                    data: {userid: data.id},
                    async: false,
                    success: function (res) {
                        layer.msg("密码已重置为123456");
                        table.reload('datalist');
                    }
                });
            });
        }else if(event=="power"){
            layer.confirm("确认调整用户\""+data.name+"\"的权限？",function (index1) {
                layer.close(index1);
                layer.confirm("再次确认，是否调整用户\""+data.name+"\"的权限？",function (index2) {
                    layer.close(index2);
                    $.ajax({
                        url: "manager/powerexchange",
                        data: {id: data.id},
                        async: false,
                        success: function (res) {
                            layer.msg("成功修改"+res+"条账户的权限");
                            table.reload('datalist');
                        }
                    });
                });
            });
        }
    });

//     按钮监听事件
    form.on("submit(editsave)",function(data){
        //data.field表单里的数据
        // console.log(data.field);
        let user={};
        user.id=data.field.id;
        user.name=data.field.name;
        user.nickname=data.field.nickname;
        user.telephone=data.field.telephone;
        $.ajax({
            url: "manager/editUser",
            data: user,
            success:function(res){
                layer.closeAll();
                layer.msg("修改成功",{icon:1,time:1800});
                table.reload('datalist');
            }
        });
        return false;
    });

    function cancle(){
        layer.closeAll();
    }

    table.on("toolbar(datalist)",function(obj){
        let event=obj.event;
        if(event==="check"){
            //获取输入框中的数据
            let text=$("[name='text']").val();
            //发送到后端  layui表格加载
            table.reload("datalist",{where:{'text':text},page:{curr:1}});

            $("[name='text']").val(text);
        }
    })


</script>

</body>
</html>